@import "../../../styles/mixins";
.input {
  width: var(--width);
  display: inline-flex;
  align-items: center;
  line-height: var(--height);
  transition: all 0.2s;
  @include shadow-box(var(--border-color));
  border-radius: 2px;
  overflow: hidden;

  &__el {
    line-height: var(--height);
    border: none;
    outline: none;
    width: 0;
    flex-grow: 1;
    padding: 0 calc(var(--height) / 4);
  }

  &:hover {
    @include shadow-box(var(--border-color), 0.4, 1px);
    .input__clear {
      opacity: 0.5;
    }
  }
  &:active {
    @include shadow-box(var(--border-color), 0.2);
  }
  &:focus-within {
    @include shadow-box(var(--primary-color), 0.3, 1px);
  }
  &__prefix,
  &__suffix {
    &:empty {
      display: none;
    }
  }
  &__prefix {
    padding-left: calc(var(--height) / 4);
  }
  &__suffix {
    padding-right: calc(var(--height) / 4);
  }
  &__clear {
    opacity: 0;
    height: 1rem;
    width: 1rem;
    line-height: 1;
    cursor: pointer;
    background-color: #ccc;
    user-select: none;
    text-align: center;
    border-width: 0;
    transition: all var(--animation-duration);
    position: relative;
    font-size: 0;
    border-radius: 50%;
    margin-left: -1rem;
    transform: translateX(-0.2rem);

    &::after,
    &::before {
      content: "";
      width: 50%;
      height: 1px;
      top: 50%;
      background-color: #fff;
      position: absolute;
      transform-origin: center;
      transform: translateX(-50%) rotate(45deg);
    }
    &::after {
      transform: translateX(-50%) rotate(-45deg);
    }
    &:hover {
      opacity: 1 !important;
    }
  }
}
